<template>
	<view class="bg">
		<view class="searchBox">
			<view class="search">
				<image src="../../../static/images/shq_search.png"></image>
				<input v-model="searchKey" placeholder="搜索生活圈商家/团购活动"/>
				<text @click="search()">搜索</text>
			</view>
		</view>
		<view class="contentBox">
			<view v-if="historySearch.length != 0" class="historyBox">
				<view class="historyBox_top">
					<text class="historyBox_top_title">历史搜索</text>
					<view class="historyBox_top_del" @click="delHistory()">
						<image src="../../../static/images/shq_del.png"></image>
					</view>
				</view>
				<view class="historyBox_list">
					<view v-for="(item,index) in historySearch" :key="index" class="historyBox_list_item">{{item}}</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="同意" title="咪购温馨提示" content="您确认删除全部历史记录？" @confirm="dialogConfirm"
					></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKey:'',
				msgType: 'success',
				messageText: '这是一条提示',
				historySearch:[]
			}
		},
		mounted(){
			uni.getStorage({
				key:'historySearch',
				success:(res)=>
				{
					this.historySearch = res.data.split(',')
				}
			})
		},
		methods:{
			/**搜索*/
			search()
			{
				if(this.searchKey)
				{
					this.historySearch.push(this.searchKey);
					uni.setStorage({
						key:'historySearch',
						data:this.historySearch.join(',')
					})
				}
			},
			delHistory()
			{
				this.msgType = 'info'
				this.$refs.alertDialog.open()
			},
			dialogConfirm()
			{
				this.historySearch = [];
				uni.removeStorageSync("historySearch")
			}
			
		}
	}
</script>

<style>
/* .bg{ width: 100%; position: absolute; top: 0; bottom: 0;} */
.searchBox{width: 100%; height: 60px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center;}
.search{width: 95%; height: 40px; border:1.5px solid #7ec1a3; border-radius: 20px; display: flex;}
.search image{width: 20px; z-index: 1; height: 20px; float: left; margin-left: 12px; margin-top: 8px;}
.search input{flex: 1; z-index: 1; height: 22px; line-height: 22px; float: left; margin-left: 7px; margin-top:8px; font-size: 15px;}
.search input::placeholder{color: #9c999c;}
.search text{width: 65px; z-index: 2; height: 28px; float: right; font-size: 16px; margin-top: 5px; border-left: 1px solid #7ec1a3; line-height: 28px; text-align: center; color: #7ec1a3;}
.contentBox{ background-color: #FFFFFF; width: 100%; position: fixed; top: 60px; bottom: 0px; left: 0px; right: 0px;}
.historyBox{width: 100%; height: auto; }
.historyBox_top{width: 90%; height: 30px; margin-top: 15px; margin-bottom: 15px; margin-left: 5%; float: left;}
.historyBox_top_title{height: 30px; line-height: 30px; font-size: 16px; color: #575757; font-weight: 400;}
.historyBox_top_del{width: 30px; height: 30px; float: right; display: flex; justify-content: center; align-items: center;}
.historyBox_top_del image{width: 19px; height: 19px;}
.historyBox_list{width: 90%; height: auto; float: left; margin-left: 5%;}
.historyBox_list_item{width: auto; height: 25px; padding: 0px 15px; margin-bottom: 8px; border-radius: 15px; float: left; margin-right: 6px; background-color: #e4e4e4; line-height: 25px; font-size: 13px; color: #66666;}
</style>